<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import ColumnsTable from "../../equip/inspect/components/ColumnsTable.vue";
import { queryDetail } from "@/api/point";
import PointTable from "./components/PointTable/index.vue";
import { BASEINFO_PONINTS_COLUMNS, TABLE_CONFIG } from "./const";
import printJS from "print-js";
import html2canvas from "html2canvas";
const props = defineProps<{ id?: string }>();
const page = defineModel("page");
// 返回列表
const backDetailPage = () => {
  page.value = "home";
};
const router = useRouter();
// 跳转到发起会堪
const gotoView = () => {
  const { id } = props;
  router.push({ path: "/all/progress/points/detail/config", query: { id } });
};
const data = ref(); // 页面数据
const loading = ref(false); // 数据请求是否完成
const route = useRoute();
// 初始化页面数据
const initData = async () => {
  const {
    query: { id: routeId }
  } = route;
  const { id } = props;
  loading.value = true;
  try {
    const res = await queryDetail({ id: id || routeId });
    data.value = res || {};
  } catch (error) {}
  loading.value = false;
};
const imageUrl = ref(null);
const printPage = () => {
  const content = document.getElementById("print-content");
  if (!content) {
    return;
  }
  let rect = content.getBoundingClientRect();
  html2canvas(content)
    .then(canvas => {
      imageUrl.value = canvas.toDataURL("image/png");
      setTimeout(() => {
        printJS({
          printable: "print-img",
          type: "html",
          style: `
         @media print{
          body,html{
            margin:0;
            padding:0;
            width:100%;
            height:${rect.height * (1080 / rect.width)}px;
          }
          #print-img {
            width:1080px;
            transform-origin:top left;
          }
          img.print-full-page{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            object-fit:cover;
            page-break-before:always;
            page-break-after:always;
            background:white;
          }
         @page {margin: 1cm;}
          }
          `, // 去掉页眉页脚
          scanStyles: false,
          // targetStyles: ['*'],
          documentTitle: "智能点位推荐"
        });
      }, 100);
    })
    .catch(error => {
      console.log("Error", error);
    });
};
onMounted(() => {
  initData();
});
</script>
<template>
  <div>
    <div v-loading="loading" class="points-detail-page">
      <div class="mb-[24px]">
        <px-button type="primary" icon="ArrowLeft" @click="backDetailPage">返回</px-button>
      </div>
      <div v-if="data">
        <!-- 基本信息 -->
        <ColumnsTable labelWidth="160px" :columns="BASEINFO_PONINTS_COLUMNS" :data="data.Header" />
        <!-- 其他表单 -->
        <PointTable v-for="(config, index) in TABLE_CONFIG" :key="index" :data="data[config.key]" :config="config" />
      </div>
      <div v-if="data" id="print-content">
        <!-- 基本信息 -->
        <ColumnsTable labelWidth="160px" :columns="BASEINFO_PONINTS_COLUMNS" :data="data.Header" />
        <!-- 其他表单 -->
        <PointTable type="print" v-for="(config, index) in TABLE_CONFIG" :key="index" :data="data[config.key]" :config="config" />
      </div>
    </div>
    <div class="info-form-btns">
      <!-- <px-button v-has="'ALL_PROGRESS_POINTS_DETAIL_CONFIG'" class="mr-[8px]" @click="printPage">打印</px-button> -->
      <px-button v-has="'ALL_PROGRESS_POINTS_DETAIL_CONFIG'" class="mr-[8px]" @click="printPage">导出</px-button>
      <px-button v-has="'ALL_PROGRESS_POINTS_DETAIL_CONFIG'" type="primary" @click="gotoView">发起会堪</px-button>
    </div>
    <img id="print-img" :src="imageUrl" />
  </div>
</template>
<style lang="scss" scoped>
.points-detail-page {
  min-height: calc(100vh - 194px);
  padding: 24px;
  margin-bottom: 68px;
  background-color: #fff;
  border-radius: 8px;
}
#print-content {
  position: fixed;
  right: -200000px;
}

.info-form-btns {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 68px;
  padding-right: 24px;
  background: #fff;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 16%);
}
#print-img {
  position: fixed;
  left: -200000px;
  width: 100%;
}
</style>
